<template>
  <section>
    <el-dialog
      title="选择合作社"
      :visible.sync="visible"
      :value="value"
      width="500px"
    >
      <el-form
        :model="group"
        :rules="rules"
        ref="cooperativeForm"
      >
        <el-form-item
          label="合作社"
          :label-width="labelWidth"
          prop="ids"
        >
          <el-select
            v-model="group.ids"
            multiple
            placeholder="请选择合作社"
          >
            <el-option
              v-for="item in cooperatives"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          @click="cancle('cooperativeForm')"
        >取 消</el-button>
        <el-button
          size="small"
          type="primary"
          @click="submit('cooperativeForm')"
        >确 定</el-button>
      </span>
    </el-dialog>
  </section>
</template>
<style>
</style>
<script>
    import {mapState} from "vuex";

    export default {
        name: "AddAndEdit",
        data() {
            return {
                visible: false,
                labelWidth: "",
                cooperatives: [],
                group: {
                    id: '',
                    ids: []
                },
                rules: {
                    ids: [{required: true, message: "请选择合作社", trigger: "blur"}],
                }
            };
        },
        computed: {
            ...mapState({
                codebooks: state => state.codebooks.codebooks
            })
        },
        watch: {
            value: {
                deep: true,
                immediate: true,
                handler: function (val) {
                    this.visible = val.show;
                    this.labelWidth = val.formLabelWidth || "120px";
                    if (val.group) {
                        this.group.id = val.group.id;
                    }
                    this.loadData();
                }
            },
            visible(val) {
                if (!val) this.$emit("on-show-change", this.$data);
            }
        },
        mounted() {
            //获取合作社
            this.$api.cooperative.all(result => {
                this.cooperatives = result.cooperatives;
            })
        },
        methods: {
            cancle(formName) {
                this.visible = false;
                this.group = {
                    id: 0,
                    ids:[]
                }
              this.$refs[formName].clearValidate();
            },
            loadData() {
                if (!this.group || !this.group.id || this.group.id <= 0) {
                    return;
                }
                this.$api.group.getCooperatives(this.group.id, result => {
                    if(result.cooperativeIds){
                        this.group.ids = result.cooperativeIds;
                    }
                });
            },
            submit(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        const callback = () => {
                            this.cancle(formName);
                        };
                        this.$api.group.setCooperative(this.group, callback)
                    } else {
                        return false;
                    }
                });
            }
        },
        props: {
            value: {
                type: Object,
                default: function () {
                    return {
                        show: false,
                        formLabelWidth: "120px",
                        group: {
                            id: 0,
                            ids:[]
                        }
                    };
                }
            }
        }
    };
</script>
